<template>
  <div class="login-state">
    <!-- <n-space v-if="store.state.auth"> -->

    <n-dropdown
      :options="options"
      placement="bottom-end"
      @select="handleSelect"
      trigger="click"
    >
      <n-button
        round
        icon-placement="right"
        :bordered="false"
        color="rgba(255,255,255,0.6)"
        text-color="#111"
      >
        <template #icon>
          <n-icon>
            <chevron-down />
          </n-icon>
        </template>
        {{
          store.state.auth ? store.getters.getUserInfo.username : '尊敬的用户'
        }}
      </n-button>
    </n-dropdown>
    <!-- <n-space v-else>
      <n-button
        round
        type="primary"
        style="margin-top: 0.3vh"
        @click="router.push('/login')"
      >
        登录/注册
      </n-button>
    </n-space> -->
  </div>
</template>

<script setup lang="ts">
// 图标
import { h, defineComponent } from 'vue';
import { NIcon } from 'naive-ui';
import {
  PersonCircleOutline as UserIcon,
  Pencil as EditIcon,
  LogOutOutline as LogoutIcon,
  ChevronDown,
} from '@vicons/ionicons5';

import { ref } from 'vue';
import { useStore } from 'vuex';

import { useRouter } from 'vue-router';
import { switchLight } from 'naive-ui/lib/switch/styles';

const renderIcon = (icon: any) => {
  return () => {
    return h(NIcon, null, {
      default: () => h(icon),
    });
  };
};

const store = useStore();

const router = useRouter();

// 点击事件
const handleSelect = (key: string) => {
  switch (key) {
    case 'personal':
      store.commit('updateAuth', {
        auth: '',
      });
      router.push('/personal');
      break;
    case 'logout':
      store.commit('updateAuth', {
        auth: '',
      });
      router.push('/home');
      break;
    default:
      break;
  }
};
// 下拉菜单
const options = [
  {
    label: '个人中心',
    key: 'personal',
    icon: renderIcon(UserIcon),
  },
  {
    label: '退出登录',
    key: 'logout',
    icon: renderIcon(LogoutIcon),
  },
];
</script>

<style scoped lang="scss"></style>
